<template>
	<div>
		<div class="query">
			<!-- 查询 -->
			<el-input class="assignBtnBorder" v-model.trim="name" placeholder="输入客户姓名" @keyup.enter.native="onQueryAssignedClues" style="width: 180px" />
			<el-input class="assignBtnBorder" v-model.number="minAge" placeholder="最小年龄" @keyup.enter.native="onQueryAssignedClues" style="width: 80px" />/
			<el-input class="assignBtnBorder" v-model.number="maxAge" placeholder="最大年龄" @keyup.enter.native="onQueryAssignedClues" style="width: 80px" />
			<el-select class="assignBtnBorder" v-model.trim="province" placeholder="选择省份" style="width: 150px">
				<el-option v-for="(item,index) in provinceList" :label="item" :value="item" />
			</el-select>
			<el-select class="assignBtnBorder" v-model.trim="product" placeholder="选择意向产品" style="width: 150px">
				<el-option v-for="(item,index) in productList" :label="item.productName" :value="item.productId" />
			</el-select>
			旅游人数
			<el-input class="assignBtnBorder" v-model.number="minNumber" placeholder="最小人数" @keyup.enter.native="onQueryAssignedClues" style="width: 80px" />/
			<el-input class="assignBtnBorder" v-model.number="maxNumber" placeholder="最大人数" @keyup.enter.native="onQueryAssignedClues" style="width: 80px" />
			<el-input class="assignBtnBorder" v-model.trim="source" placeholder="填写线索来源" @keyup.enter.native="onQueryAssignedClues" style="width: 160px" />
			<el-button @click="onQueryAssignedClues" type="primary">搜索</el-button>
			<el-button @click="onReset" type="warning">重置</el-button>
		</div>
		<div class="showData">
			<!-- 表格 -->
			<el-table :data="clueList" style="width: 100%" @selection-change="handleSelectionChange">
				<!-- 选项框 -->
				 <el-table-column fixed type="selection" width="55" align="center" />
				<!-- 序号 -->
				<el-table-column fixed label="序号" width="60" align="center" >
				        <template #default="scop" >
				           <span v-text="(this.current-1)*10 +scop.$index +1" width="60"> </span>
				        </template>
				</el-table-column>
				
			    <el-table-column fixed prop="customerName" label="姓名" width="150" align="center" />
			    <el-table-column prop="gender" label="性别" width="120" align="center" >
					<template #default="scop" >
					   <span v-if="scop.row.gender == 1">男</span>
					   <span v-else>女</span>
					</template>
				</el-table-column>
			    <el-table-column prop="age" label="年龄" width="120" align="center" />
			    <el-table-column prop="province" label="省份" width="120" align="center" />
			    <el-table-column prop="contactNumber" label="联系电话" width="150" align="center" />
			    <el-table-column prop="intentionalProductId" label="意向产品" width="120" align="center" />
				<el-table-column prop="travelersCount" label="旅游人数" width="120" align="center" />
				<el-table-column prop="clueSource" label="线索来源" width="150" align="center" />
				<el-table-column prop="createdTime" label="创建时间" width="180" align="center" />
				
			    <el-table-column fixed="right" label="操作" width="300" align="center">
			      <template #default="scope">
			        <el-button type="success" size="small" plain @click="viewAssignDetail(scope.$index, scope.row)">查看详情及分配情况</el-button>
			      </template>
			    </el-table-column>
			  </el-table>
			  <!-- 分隔线 -->
			  <el-divider />
			  
			  <!-- 分页按钮 -->
			  <el-button class="assignBtnBorder" v-if="current == 1" type="info" disabled>上一页</el-button>
			  <el-button class="assignBtnBorder" v-else type="primary" @click="toPrevious">上一页</el-button>
			  <span class="assignBtnBorder">{{current}}</span>
			  
			  <el-button class="assignBtnBorder" v-if="current == pages" type="info" disabled>下一页</el-button>
			  <el-button class="assignBtnBorder" v-else type="primary" @click="toNext">下一页</el-button>
			  
			  <span class="assignBtnBorder">总记录数：{{total}}</span>
			  <span class="assignBtnBorder">总页数：{{pages}}</span>
			</div>
			
			<!-- 显示线索信息以及最新线索记录 -->
			<el-drawer v-model="latestClueTrackingRecordingView" title="I am the title" :with-header="false">
			    <el-descriptions
			        title="线索信息"
			        direction="vertical"
			        :column="2"
			        :size="size"
			        border
			      >			    
			        <el-descriptions-item label="客户姓名">{{currentClue.customerName}}</el-descriptions-item>
					<el-descriptions-item label="身份证号">{{currentClue.idNumber}}</el-descriptions-item>
					<el-descriptions-item label="性别">
						<span v-if="currentClue.gender == 1">男</span>
						<span v-else>女</span>
					</el-descriptions-item>
					<el-descriptions-item label="年龄">{{currentClue.age}}</el-descriptions-item>
					<el-descriptions-item label="学历">{{currentClue.education}}</el-descriptions-item>
					<el-descriptions-item label="职业">{{currentClue.occupation}}</el-descriptions-item>
					<el-descriptions-item label="省份">{{currentClue.province}}</el-descriptions-item>
					<el-descriptions-item label="城市">{{currentClue.city}}</el-descriptions-item>
					<el-descriptions-item label="联系电话">{{currentClue.contactNumber}}</el-descriptions-item>
					<el-descriptions-item label="邮箱">{{currentClue.email}}</el-descriptions-item>
					<el-descriptions-item label="旅游人数">{{currentClue.travelersCount}}</el-descriptions-item>
					<el-descriptions-item label="出行类型">{{currentClue.travelType}}</el-descriptions-item>
					<el-descriptions-item label="意向产品ID">{{currentClue.intentionalProductId}}</el-descriptions-item>
					<el-descriptions-item label="创建时间">{{currentClue.createdTime}}</el-descriptions-item>
					<el-descriptions-item label="线索来源">{{currentClue.clueSource}}</el-descriptions-item>
					<el-descriptions-item label="是否成功">
						<span v-if="currentClue.success == 0">未成功</span>
						<span v-else >已成功</span>
					</el-descriptions-item>
					<el-descriptions-item label="线索状态">
						<span v-if="currentClue.clueStatus == 0">未分配</span>
						<span v-if="currentClue.clueStatus == 1">已分配</span>
						<span v-if="currentClue.clueStatus == 2">已轮转</span>
						<span v-if="currentClue.clueStatus == 3">无意向结束</span>
					</el-descriptions-item>
					<el-descriptions-item label="是否删除">
						<span v-if="currentClue.status == 0">未删除</span>
						<span v-else="currentClue.satus == 1">已删除</span>
					</el-descriptions-item>
					<el-descriptions-item label="备注">{{currentClue.note}}</el-descriptions-item>
				</el-descriptions>
				
				<!-- 分割线 -->
				<el-divider>
				    <el-icon><star-filled /></el-icon>
				</el-divider>
				
				<el-descriptions
				    title="线索最新更新记录"
				    direction="vertical"
				    :column="2"
				    :size="size"
				    border
				  >
				    <el-descriptions-item label="销售员ID">{{latestClueRecording.salespersonId}}</el-descriptions-item>
					<el-descriptions-item label="开始时间">{{latestClueRecording.startTime}}</el-descriptions-item>
					<el-descriptions-item label="跟进时间">{{latestClueRecording.followupTime}}</el-descriptions-item>
					<el-descriptions-item label="根据时长(分钟)">{{latestClueRecording.followupDuration}}</el-descriptions-item>
					<el-descriptions-item label="根据方式">{{latestClueRecording.followupMethod}}</el-descriptions-item>
					<el-descriptions-item label="跟踪情况记录">{{latestClueRecording.trackingRecord}}</el-descriptions-item>
					<el-descriptions-item label="意向程度">
						<span v-if="latestClueRecording.intentLevel == 0">有意向</span>
						<span v-if="latestClueRecording.intentLevel == 1">一般</span>
						<span v-if="latestClueRecording.intentLevel == 2">无意向</span>
						<span v-else>不确定</span>
					</el-descriptions-item>
					<el-descriptions-item label="跟踪状态">
						<span v-if="latestClueRecording.trackingStatus == 0">未处理</span>
						<span v-if="latestClueRecording.trackingStatus == 1">已联系</span>
						<span v-if="latestClueRecording.trackingStatus == 2">已放弃</span>
						<span v-if="latestClueRecording.trackingStatus == 3">已成交</span>
						<span v-if="latestClueRecording.trackingStatus == 4">已轮转</span>
					</el-descriptions-item>
					<el-descriptions-item label="备注">{{latestClueRecording.note}}</el-descriptions-item>
				</el-descriptions>
			  </el-drawer>
		</div>
</template>

<script>
	export default {
		name: 'AssignedClueComponent',
		props: ["list"],
		data() {
			return {
				clueList: [], // 未分配页面；
				current: 1, // 当前页
				total: 0, // 总记录数
				pages: 0, // 总页数
				// 条件查询
				name: '',
				minAge: '',
				maxAge: '',
				province: '',
				product: '',
				minNumber: '',
				maxNumber: '',
				source: '',
				
				// 省份信息
				provinceList: [
					"河北","山西","吉林","辽宁","黑龙江","陕西","甘肃","青海",
					"山东","福建","浙江","河南","湖北","湖南","江西","江苏","安徽",
					"广东","海南","四川","贵州","云南","台湾","北京","上海","天津",
					"重庆","内蒙古自治区","新疆维吾尔自治区","宁夏回族自治区","广西壮族自治区",
					"新疆自治区","香港特别行政区","澳门特别行政区"
				],
				productList:[], //产品信息
				
				// 已分配线索情况的显示
				latestClueTrackingRecordingView: false,
				
				// 最新的线索记录
				currentClue: {},
				latestClueRecording: {},
				isNull: "-"
			}
		},
		// 声明方法
		methods: {
			// 子传父进行通信；
			changeAssignedClue(obj) {
				// this.$emit('changeClue', this.clueList);
				this.$emit('changeClue',obj);
			},
			// 查询所有的已完成分配的线索
			selectAssignedAllClues(index) {
				if(index == 1) {
					// 已分配
					this.$axios({
						url: 'clue/customerClue/selectCluesList',
						methods: 'post',
						params: {
							condition: 1,
							currentPage: this.current,
							orderBy: 0,
						}
					}).then(res => {
						// 分页数据
						this.clueList = res.data.list;
						this.total = res.data.total;
						this.pages = res.data.pages;
					});
				} else if(index == 2){
					// 有条件查询；- 搜索功能
					this.$axios({
						url: 'clue/customerClue/conditinalQuery',
						method: 'post',
						params: {
							customerName: this.name,
							minAge: this.minAge,
							maxAge: this.maxAge,
							province: this.province,
							productId: this.product,
							minNumber: this.minNumber,
							maxNumber: this.maxNumber,
							clueSource: this.source,
							assign: 1,
							currentPage: this.current,
						}
					}).then(res => {
						// 分页数据
						this.clueList = res.data.list;
						this.total = res.data.total;
						this.pages = res.data.pages;
					});
				}
				// 子传父数据
				let sonObj = {
					customerName: this.name,
					minAge: this.minAge,
					maxAge: this.maxAge,
					province: this.province,
					productId: this.product,
					minNumber: this.minNumber,
					maxNumber: this.maxNumber,
					clueSource: this.source,
				}
				this.changeAssignedClue(sonObj);
				
			},
			// 上一页；
			toPrevious() {
				this.current--;
				this.selectAssignedAllClues(2);
			},
			// 下一页；
			toNext() {
				this.current++;
				this.selectAssignedAllClues(2);
			},
			// 查询产品信息
			selectAllProductInfo() {
				// 获取所有产品的信息
				this.$axios({
					url: "clue/travelProduct/selectAllProduct",
					methods: "post"
				}).then(res => {
					this.productList = res.data;
				});
			},
			// 搜索的点击事件
			onQueryAssignedClues() {
				this.selectAssignedAllClues(2);
				// 清除数据
				this.onReset();
			},
			// 输入框的重置
			onReset() {
				this.name = '';
				this.minAge = '';
				this.maxAge = '';
				this.province = '';
				this.product = '';
				this.minNumber = '';
				this.maxNumber = '';
				this.source = '';
			},
			// 查询线索信息已经跟踪记录
			viewAssignDetail(index, row) {
				this.latestClueTrackingRecordingView = true;
				let id = row.clueId;
				// 查询线索
				this.$axios({
					url: 'clue/customerClue/selectlatestTrackingClue',
					params: {
						clueId: id,
					},
					method: 'post',
				}).then(res => {
					this.currentClue = res.data.clue;
					this.latestClueRecording = res.data.clueTracking[0];
				})
			}
		},
		created() {
			this.selectAssignedAllClues(1);
			this.selectAllProductInfo();
		}

	}
</script>

<style scoped>
	.assignBtnBorder {
		margin: 10px 10px;
	}
</style>